<template>
	<view>
		<!-- <u-navbar :is-back="false" :is-fixed="true" title="我的产品"></u-navbar> -->
		<!-- Tab navigation -->
		<view class="fixed-top bg-white">

			<view class="px-2 mt-2 pb-2 dfes">
				<u-button  class="mr-2 text-white bg-8ED0F2"  size="mini"
								shape="circle" @click="open('tabbar/market/upstream')">新增</u-button>
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="productServeNameSearch" :action-style="actionStyle" @change="searchHandler"
					@custom="searchHandler" @clear="searchHandler" :show-action="true" />
			</view>
			<scroll-view scroll-x class="tab-scroll" :scroll-into-view="scrollinto" :scroll-with-animation="true"
				:show-scrollbar="false">
				<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index" @click="changeTab(index)"
					:key="index">
					<view class="font-16" :class="tabIndex === index ? 'text-8ED0F2 active':''">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view class=" p-2" style="margin-top: 100px;height: 100vh;">
			<scroll-view lower-threshold="5" @scrolltoupper="refresh" @scrolltolower="scrolltolower" scroll-y
				style="height: calc(100vh - 60px);">
				<view v-for="(item, index) in tabs" :key="index" class="pb-2 mt-2 content-item">
					<view class="show-dd pl-2 bg-white pt-2">
						<view class="dfes">
							<view class="font-14 text-333333 font-weight-bold">{{item.productServeName}}</view>
							<view class="position-absolute text-FFC251 font-14" style="right: 10px;">
								<u-switch size="40" @change="statusChange" active-color="#FFC251" inactive-color="#eee"
									v-model="item.productStatusBoolean" :loading="item.changeStatusLoading"
									:active-value="index+'_'+'1'" :inactive-value="index+'_'+'0'" />
							</view>
						</view>
						<view class="lineHight mt-2">
							<view>服务商名称：{{ item.serviceName }}</view>
							<view class="wraps">服务介绍：{{ item.serviceIntroduction }}</view>
							<view>服务价格(元)：{{ item.servicePrice }}</view>
						</view>
						<view class="lineHight-3 text-right">
							<u-button class="mr-2 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
								shape="circle"
								@click="open('tabbar/market/downstreamDetails?id='+item.id)">查看</u-button>
							<u-button class="mr-2 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
								shape="circle" @click="open('tabbar/market/upstreamEditor?id='+item.id)">编辑</u-button>
							<u-button class="mr-2 borRound text-78AB06" @click="delProduct(item.id)" :plain="false"
								:hair-line="false" size="mini" shape="circle">删除</u-button>
						</view>
					</view>
				</view>
				<view v-if="!hasMore && tabs.length > 0" class="text-center mt-3 mb-3">
					<view class="text-muted">没有更多数据了</view>
				</view>
				<view v-else-if="!hasMore && tabs.length === 0" class="text-center mt-3 mb-3">
					<view class="text-muted">暂无数据</view>
				</view>
				<view v-else class="text-center mt-3 mb-3">
					<view class="btn btn-primary">加载更多</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $T from '@/common/free-lib/time.js';
	export default {
		data() {
			return {
				tabBars: [{
						"name": "全部产品",
						"productStatus": ""
					},
					{
						"name": "已上架",
						"productStatus": 1
					},
					{
						"name": "已下架",
						"productStatus": 0
					},
				],
				scrollinto: "",
				tabIndex: 0,
				checked: true,
				actionStyle: {
					color: '#8ED0F2'
				},
				lazyLoadSign: false,
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				tabs: [],
				productServeNameSearch: '',
			};
		},
		onPullDownRefresh() {
			this.tabs = [];
			this.form.pageNo = 1;
			this.getProductList();
		},
		onShow(options) {
			this.getProductList();
			this.tabs = [];
		},
		methods: {
			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
			// Change the active tab
			changeTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tab" + index;
				this.form.pageNo = 1;
				this.tabs = [];
				this.getProductList();
			},
			// Handle tab change event
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			statusChange(e) {
				this.changeStatusHandler(e.split("_")[0], e.split("_")[1])
			},
			scrolltolower(e) {
				if (this.lazyLoadSign) return;
				this.lazyLoadSign = true;
				try {
					this.form.pageNo = this.form.pageNo + 1;
					this.getProductList();
				} catch (error) {
					console.log(error);
				}
				this.lazyLoadSign = false;
			},
			searchHandler() {
				this.form.pageNo = 1;
				this.tabs = []
				this.getProductList();
			},
			getProductList() {
				uni.showLoading({
					title: '加载中'
				});
				$H.get('/upper/upperMarketProduct/upper/list', {
						pageNo: this.form.pageNo,
						pageSize: this.form.pageSize,
						productStatus: this.tabBars[this.tabIndex].productStatus,
						productServeName: this.productServeNameSearch
					}, {})
					.then(res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.result.records.length == 0) {
							uni.showToast({
								title: '没有更多啦！',
								icon: 'success'
							});
						 this.hasMore = false; // 设置没有更多数据
							return;
						}
						const resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							let item = res.result.records[i];
							resList.push({
								id: item.id,
								productServeName: item.productServeName,
								serviceName: item.serviceName,
								serviceIntroduction: item.serviceIntroduction,
								servicePrice: item.servicePrice,
								productStatus: item.productStatus,
								productStatusBoolean: item.productStatus == 1 ? true : false,
								changeStatusLoading: false
							});
						}
						this.tabs.push(...resList);
						this.form.total = res.result.total;
						this.hasMore = this.tabs.length < this.form.total;
					})
					.catch(error => {
						uni.stopPullDownRefresh();
						console.error('请求出错', error); // 处理任何错误  
						uni.hideLoading();
					});
			},
            // 加载更多
            refresh() {
            	// 重置页码为 1
            	this.form.pageNo = 1;
            	// 清空数据列表
            	this.tabs = [];
            	// 设置标记为有更多数据
            	this.hasMore = true;
            	// 重新请求数据
            	this.getProductList();
            	// 结束下拉刷新动画
            	uni.$emit('stopPullDownRefresh');
            },
			changeStatusHandler(index, productStatus) {
				uni.showLoading({
					title: '加载中'
				});
				this.tabs[index].changeStatusLoading = true;
				$H.post('/upper/upperMarketProduct/upper/productStatus?id=' + this.tabs[index].id + "&productStatus=" +
						productStatus, {}, {})
					.then(res => {
						uni.hideLoading();
						this.tabs[index].changeStatusLoading = false;
						if (res.success) {
							uni.showToast({
								title: '操作成功',
								icon: 'success'
							});
							this.tabs[index].productStatusBoolean = productStatus == 1 ? true : false;
						} else {
							uni.showToast({
								title: res.message || '操作失败',
								icon: 'none'
							});
						}

					})
					.catch(error => {
						console.error('请求出错', error); // 处理任何错误 
						this.tabs[index].changeStatusLoading = false;
						uni.hideLoading();
					});

			},

			delProduct(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该产品吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});
							$H.del('/upper/upperMarketProduct/upper/delete?id=' + id, {}, {})
								.then(res => {
									uni.hideLoading();
									if (res.success) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										});
										this.tabs = [];
										this.pageNo = 1;
										this.getProductList();
									} else {
										uni.showToast({
											title: res.message || '删除失败',
											icon: 'none'
										});
									}
								})
								.catch(error => {
									console.error('请求出错', error); // 处理任何错误  
									uni.hideLoading();
								});
						}
					}
				});
			}

		}
	};
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}

	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 32px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>